<template>
  <div class="container">
    <el-card>
      <div class="container-head">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form size="medium" label-width="78px">
              <el-col :span="14">
                <el-form-item label="学科名称">
                  <el-input v-model="subjectName" placeholder="请输入关键字" clearable :style="{ width: '100%' }"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" type="flex" align="left">
                <el-button type="primary" size="mini" @click="getObjList">搜索</el-button>
                <el-button size="mini" @click="subjectName = ''">清除</el-button>
              </el-col>
            </el-form></el-col
          >
          <el-col :span="8" type="flex" align="right">
            <el-button icon="el-icon-edit" type="success" size="small" @click="showAddDialog">新增学科</el-button>
          </el-col>
        </el-row>
        <!-- 提示 -->
        <el-alert :title="'数组一共有' + counts + '条'" type="info" show-icon> </el-alert>
      </div>
      <div class="container-body">
        <!-- 表格内容 -->
        <el-table :data="$store.state.subjects.objList" border style="width: 100%">
          <el-table-column type="index" min-width="30" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column min-width="160" prop="addDate" label="创建事件">
            <template v-slot="scoped">
              <span>{{ scoped.row.addDate | formatTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isFrontDisplay" min-width="50" label="前台是否显示">
            <template v-slot="scoped">
              <span v-if="scoped.row.isFrontDisplay === 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" min-width="40" label="二级目录"> </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column min-width="130" prop="totals" label="题目数量"> </el-table-column>
          <el-table-column label="操作" width="240">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="$router.push({path: '/subjects/directorys', query: {
                id: scope.row.id,
                name: scope.row.subjectName
              }})">学科分类</el-button>
              <el-button type="text" size="small" @click="$router.push({path: '/subjects/tags', query: {
                id: scope.row.id,
                name: scope.row.subjectName
              }})">学科标签</el-button>
              <el-button type="text" size="small" @click="showUpdataDialog(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="subjectDele(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="sizechange"
          @current-change="pagechange"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 新增学科弹窗 -->
    <SubjectsAdd :visible.sync="addDialogVisible"  @sure="addSubject"></SubjectsAdd>
    <!-- 修改学科弹窗 -->
    <SubjectsAdd title="修改学科" :visible.sync="updateDialogVisible"  @sure="updateSubject"></SubjectsAdd>
  </div>
</template>

<script>
import { parseTime } from '@/filters'
import SubjectsAdd from '../components/subjects-add.vue'
import { add, update, remove } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      page: 1,
      pagesize: 10,
      counts: 0,
      subjectName: '',
      addDialogVisible: false,
      updateDialogVisible: false,
      // 当前修改学科ID
      updateId: undefined
    }
  },
  methods: {
    // 把关键字正式过滤
    async getObjList () {
      try {
        const res = await this.$store.dispatch('getObjList', {
          page: this.page,
          pagesize: this.pagesize,
          subjectName: this.subjectName.trim()
        })
        this.counts = res.data.counts
      } catch (error) {
        console.log(error)
      }
    },
    // 切换分页
    sizechange (val) {
      this.pagesize = val
      this.getObjList()
    },
    pagechange (val) {
      this.page = val
      this.getObjList()
    },
    // 显示新增学科对话框
    showAddDialog () {
      this.addDialogVisible = true
    },
    // 显示修改学科对话框
    showUpdataDialog (row) {
      this.updateId = row.id
      this.updateDialogVisible = true
    },
    // 新增学科
    async addSubject (data) {
      try {
        await add(data)
        this.$message.success('新增学科成功')
        this.page = 1
        this.getObjList()
      } catch (error) {
        console.log(error)
      }
    },
    // 修改学科
    async updateSubject (data) {
      try {
        data.id = this.updateId
        await update(data)
        this.$message.success('修改学科成功')
        this.page = 1
        this.getObjList()
      } catch (error) {
        console.log(error)
      }
    },
    // 删除学科
    subjectDele (row) {
      this.$confirm('您确认永久删除这个学科吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(row)
        if (!res.data.success) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        this.page = 1
        this.getObjList()
      }).catch(() => {
      })
    }
  },
  created () {
    this.getObjList()
  },
  computed: {},

  filters: {
    formatTime (val) {
      return parseTime(val)
    }
  },
  components: {
    SubjectsAdd
  }
}
</script>

<style scoped lang='less'>
.container-head {
  margin-bottom: 10px;
}
  </style>
